<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/template/template.xhtml"
	xmlns:p="http://primefaces.org/ui"
>
<ui:define name="conteudo">
	<div class="page-header">
		<ol class="breadcrumb breadcrumb-page">
			<li>
				<h:outputLink>
					<h:outputText value="#{mensagens['display.voce.esta.em']}" />
				</h:outputLink>
			</li>
			<li>
				<h:outputText value="#{mensagens['display.pesquisa']}" />
			</li>
			<li class="active">
				<h:outputText value="#{mensagens['display.resultado.pesquisa']}" />
			</li>
		</ol>
		<h:messages id="mensagens"  errorClass="alert alert-danger alert-dark" infoClass="alert alert-info alert-dark" warnClass="alert alert-dark"/>
	</div>
	<h:form prependId="false" id="form">
	<div class="page-search">
		<div id="content" class="content">
				<div class="search-text">
					<strong><h:outputText value="#{resultadoPesquisaBean.nuResultados}" /> </strong>
					<h:outputText value="#{mensagens['display.resultados.encontrados.para.low']}" />
					<span class="text-primary"> <h:outputText value="#{resultadoPesquisaBean.consulta}" /></span>
				</div>
			
				<div class="search-tabs">
					<ul class="nav nav-tabs">
						<li class="active"> 
							<a href="#topicos" data-toggle="tab">
								<h:outputText value="#{mensagens['display.topicos']}" />
								<span class="label label-success">
									<h:outputText value="#{resultadoPesquisaBean.nuTopicos}" /> 
								</span>
							</a>
						</li>
						<li>
							<a href="#usuarios" data-toggle="tab">
								<h:outputText value="#{mensagens['display.usuarios']}" />
								<span class="label label-success">
									<h:outputText value="#{resultadoPesquisaBean.nuUsuarios}" /> 
								</span>
							</a>
						</li>
						<li>
							<a href="#msgs" data-toggle="tab">
								<h:outputText value="#{mensagens['display.mensagens']}" />
								<span class="label label-success">
									<h:outputText value="#{resultadoPesquisaBean.nuMensagens}" /> 
								</span>
							</a>
						</li>
						<li>
							<a href="#grupos" data-toggle="tab">
								<h:outputText value="#{mensagens['display.grupos.estudo']}" />
								<span class="label label-success">
									<h:outputText value="#{resultadoPesquisaBean.nuGrupos}" /> 
								</span>
							</a>
						</li>
						<li>
							<a href="#categorias" data-toggle="tab">
								<h:outputText value="#{mensagens['display.categoria']}" />
								<span class="label label-success">
									<h:outputText value="#{resultadoPesquisaBean.nuCategorias}" /> 
								</span>
							</a>
						</li>
					</ul>
					
					<div class="panel search-panel">
						<div class="search-form bg-primary" style="margin-top: -3px;">
							<div class="input-group input-group-lg">
								<span class="input-group-addon no-background"><i class="fa fa-search"></i></span>
								<h:inputText id="inputPesquisa" value="#{pesquisaBean.consulta}" styleClass="form-control"/>
								<span class="input-group-btn">
									<h:commandButton action="#{pesquisaBean.pesquisar()}" value="#{mensagens['display.pesquisar']}" styleClass="btn"/>
								</span>
							</div>
						</div>
						
						<div class="panel-body tab-content">
							<!-- TOPICOS -->
							<ul id="topicos" class="search-classic tab-pane fade in active">
								<ui:repeat var="topico" value="#{resultadoPesquisaBean.topicos}">
									<li>
										<h:commandLink action="#{resultadoPesquisaBean.detalharTopico(topico)}" value="#{topico.titulo}" styleClass="search-title"/>
										<div class="search-content">
											<h:outputText value="#{topico.usuario.nome}" escape="false"/>
										</div>
										<div class="search-tags">
											<span class="search-tags-text"><h:outputText value="#{mensagens['display.categoria']}s" /> </span>
											<ui:repeat var="categoria" value="#{topico.categorias}">
												<h:outputText value="#{categoria.deCategoria}" styleClass="label label-success"/>
											</ui:repeat>
										</div>
										
									</li>
								</ui:repeat>
							</ul>
							<!-- USUARIOS -->
							<div id="usuarios" class="search-users tab-pane fade in">
								<h:dataTable
									value="#{resultadoPesquisaBean.usuarios}"
									var="usuario"
									styleClass="table table-hover"
									
								>
									<h:column  rowHeader="td" headerClass="text-center">
										<f:facet name="header">
											<h:outputText value="#" />
										</f:facet>
										<div class="text-center">
											<h:outputText value="#{usuario.indice}" styleClass="text-center"/>
										</div>
									</h:column>
									<h:column >
										<f:facet name="header">
											<h:outputText value="#{mensagens['display.usuario']}" />
										</f:facet>
										<h:graphicImage value="/resources/img/avatares/#{usuario.avatar}" styleClass="avatar"/>
										<h:commandLink action="#{resultadoPesquisaBean.perfilUsuario(usuario)}" value="#{usuario.nome}" styleClass="marginLeft_10"/>
									</h:column>
									<h:column >
										<f:facet name="header">
											<h:outputText value="#{mensagens['display.matricula']}" />
										</f:facet>
										<h:outputText value="#{usuario.matricula}" />
									</h:column>
									<h:column >
										<f:facet name="header">
											<h:outputText value="#{mensagens['display.email']}" />
										</f:facet>
										<h:outputText value="#{usuario.email}" />
									</h:column>
								</h:dataTable>
							</div>
							<div id="msgs" class="search-messages tab-pane fade widget-messages in">
								<ui:repeat var="mensagem" value="#{resultadoPesquisaBean.mensagens}">
									<div class="message unread">
										<h:commandLink action="#{resultadoPesquisaBean.verMensagem(mensagem)}" value="#{mensagem.remetente.nome}" styleClass="from"/>
										<h:commandLink action="#{resultadoPesquisaBean.verMensagem(mensagem)}" value="#{mensagem.titulo}" styleClass="title"/>
										<div class="date">
											<h:outputText value="#{mensagem.tempo}" />
										</div>
									</div>
								</ui:repeat>
							</div>
							<div id="grupos" class="search-classic widget-followers tab-pane fade in">
								<ui:repeat var="grupoEstudo" value="#{resultadoPesquisaBean.grupoEstudos}">
									<li> 
										<h:commandLink action="#{resultadoPesquisaBean.detalharGrupoEstudo(grupoEstudo)}" value="#{grupoEstudo.noGrupo}" styleClass="search-title"/>
										<div class="search-content follower">
											<h:graphicImage value="/resources/img/avatares/#{grupoEstudo.professor.avatar}" styleClass="follower-avatar"/>
											<h:outputText value="#{grupoEstudo.professor.nome}" escape="false" styleClass="marginLeft_10"/>
										</div>
										<div class="search-tags">
										</div>
									</li>
								</ui:repeat>
							</div>
							<div id="categorias" class="search-classic widget-followers tab-pane fade in">
								<ui:repeat var="categoria" value="#{resultadoPesquisaBean.categorias}">
									<li> 
										<div class="label bg-success">
											<h:outputText value="#{categoria.deCategoria}" />
										</div>
									</li>
								</ui:repeat>
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</h:form>
	</ui:define>
</ui:composition>